<template>
  <el-drawer
    :title="this.$t('titles.addTrajectory')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="authorBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">

    <div v-show="!closable">
    <previous :param="name"></previous>
    <next :param="name"></next>
    </div>
    
    <div class="trackForm">
        <el-form ref="ruleForm" :model="stationForm" class="wifiForm">
          <el-form-item class>
            <div class="flex formItem">
              <div class="itemLeft">{{ this.$t("titles.trajectoryName")}}</div>
              <div class="itemRight">
                <input type="text" :placeholder="this.$t('placeholder.trajectoryName')" v-model="stationForm.name">
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="flex formItem">
              <div class="itemLeft">{{this.$t("titles.selectWaypoints")}}</div>
              <div class="itemRight">
                <el-select
                  v-model="stationForm.stations"
                  :placeholder="this.$t('placeholder.selectWaypoints')"
                  multiple
                  size="mini"
                  class="waypointSelect"
                  popper-class="selectClass"
                  @keyup.enter="subUpdate"
                >
                  <el-option
                    v-for="(item,index) in this.$store.state.stationList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>

          <div class="flex formBtns">
            <el-button type="primary" @click="subUpdate">{{this.$t("buttons.submit")}}</el-button>
          </div>
        </el-form>
    </div>
  </el-drawer>
</template>

<script>
import next from "./guide/next.vue"
import previous from "./guide/previous.vue"
import { showTrajectory, submitAddTrack, showTrajectoryAdd } from '../js/trajectory'
export default {
  name: "trackAdd",
  components: {
    next,
    previous
  },
  data() {
    return {
      drawer: false,
      direction: 'btt',
      closable: false,
      showClose: false,

      name: "trajectory",

      stationForm: {
        name: "",
        stations: ""
      }
    };
  },
  mounted(){
    let guide = window.localStorage.getItem("guide");
    if(guide){
        this.closable = true;
    }
  },
  methods: {
    //提交
    subUpdate() {
      submitAddTrack(this.stationForm);
    },

    //关闭模态框
    closeDrawer: function(){
      showTrajectoryAdd(false)
    }
  },

  //属性监听
  watch: {
    "$store.state.showAddTrack": function(val){
        this.drawer = val;
    },

    "$store.state.guideModule": function(val){
        // if(!val){
        this.closable = !val;
        // }
    }
  }
};
</script>

<style scoped lang="less">
.trackForm{
  padding: 0 15px;
  .formItem {
    border-bottom: 1px solid #eeeeee;
    .itemLeft {
      flex: 4;
    }
    .itemRight {
      height: 100%;
      flex: 6;
      input {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .waypointSelect {
    height: 40px;
    input {
      height: 10px;
    }
    .el-input__icon {
      height: inherit;
    }
    .el-input__inner {
      height: normal;
      line-height: normal;
    }
    width: 100%;
    border: none;
    outline: none;
    padding-left: 0.7em;
  }
  .formBtns {
    padding: 0 5px;
    margin-top: 15px;
    button {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }

  .el-form-item__content {
    line-height: 20px;
  }
}
</style>